<template>
    <el-form v-model="form" label-width="100px">
        <el-form-item label="节点名称">
            <el-input v-model="form.nodeName"/>
        </el-form-item>

        <el-form-item label="节点ID">
            <el-input v-model="form.typeConcatName" disabled/>
        </el-form-item>

        <el-form-item label="源节点ID">
            <el-input v-model="form.sourceNodeId" disabled/>
        </el-form-item>

        <el-form-item label="目标节点ID">
            <el-input v-model="form.targetNodeId" disabled/>
        </el-form-item>

        <el-form-item label="复制数据流">
            <el-radio-group v-model="form.distribute" active-label="Y" inactive-label="N">
                <el-radio label="Y">否</el-radio>
                <el-radio label="N">是</el-radio>
            </el-radio-group>
        </el-form-item>
        <dialog-footer @ok="submitForm" @cancel="cancel" ok-text="保存"/>
    </el-form>
</template>

<script setup>
import {onMounted, reactive, ref, toRaw, watch} from 'vue';
import {flowServiceStore} from '@data/store/flow';

const flowCount = flowServiceStore();
import {storeToRefs} from 'pinia';
const {flowData} = storeToRefs(flowCount);

const props = defineProps({
    detailObject: {
        type: Object,
        default: () => {
        },
    },
})

const emit = defineEmits(['update-data', 'cancel']);

const form = reactive({
    nodeName: '',
    name: '',
    type: 'Edge',
    sourceNodeId: '',
    targetNodeId: '',
    distribute: ''
})

// 初始化表单数据
onMounted(() => {
    form.name = props.detailObject.id;
    form.typeConcatName = `${props.detailObject.id}(${form.type}-${props.detailObject.id})`;
    form.nodeName = form.name;
})

watch(() => props.detailObject, (newVal) => {
    const rawData = toRaw(newVal);
    console.log('rawData', rawData);
    if (rawData?.type === 'edge') {
        console.log('edgeConfig', rawData)
        form.id = rawData.id;
        form.sourceNodeId = rawData.sourceNodeId; // 直接从顶层获取
        form.targetNodeId = rawData.targetNodeId; // 直接从顶层获取
        form.distribute = rawData.data?.distribute || 'Y';
    }
}, { immediate: true, deep: true });

const submitForm = () => {
    form.fields.field.forEach(fieldItem => {
      form.fieldList.push(fieldItem);
    });
    flowCount.setFlowData(
        {
            ...flowData.value,
            [props.detailObject.id]: {
                ...form,
                name: `${form.type}-${form.name}`,
            }
        }
    )
    flowData.value[form.sourceNodeId].distribute = form.distribute;
    console.log(flowData.value);
    emit('cancel');

}
const cancel = () => {
    emit('cancel');
}
</script>

<style scoped lang="scss">

</style>